<template>
  <view class="">
    <clHeadTab :modelData="modelData" @change="tabChange"></clHeadTab>

    <view class="h-90p">
      <component :is="componentsName"></component>
    </view>
    
  </view>
</template>

<script>
import clHeadTab from "../../components/cl-head-tab/cl-head-tab.vue";
import cloth from './pages/cloth/cloth.vue'
import finance from './pages/finance/finance.vue'
import information from './pages/information/information.vue'

export default {
  data() {
    return {
      modelData: [{ label: "布匹", name: "cloth" }, { label: "财务", name: "finance" }, { label: "资料", name: "information" }],
      componentsName: "cloth"
    };
  },
  components: {
    clHeadTab,
    cloth,
    finance,
    information,

  },
  methods: {
    tabChange(item) {
      this.componentsName = item.name
    },
    btnListSaleOrder() {
      // console.log("btnListSaleOrder");
      this.$Router.push({
        name: "SaleOrderList",
      });
    },
    btnPrintLabel() {
      // console.log("btnPrintLabel");
      this.$Router.push({
        name: "GoodsLabel",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
	.h-90p {
		padding-bottom: 102rpx;
	}
</style>